<template>
   <div class="iframe-cont">
       <div class="content">
           <el-page-header  @back="$router.go(-1)" :content="$route.meta.title"></el-page-header>
           <el-form class="form" ref="form" :model="form" size="mini" :rules="rules" label-width="140px" label-position="right">
               <el-form-item label="设备编码:" prop="macCode">
                   <el-input class="form-item" v-model="form.macCode" placeholder="请输入出厂编码"></el-input>
               </el-form-item>
               <el-form-item label="维修内容:" prop="repairContent">
                   <el-input class="form-item" type="textarea" :rows="4" v-model="form.repairContent" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="更换配件:">
                   <div class="parts" v-for="(item, index) in form.partsInfo" :key="index">
                       <el-input style="width: 140px;" placeholder="配件名称" v-model="item.partsName"></el-input>
                       <el-input style="width: 140px;margin-left: 10px;" type="number" placeholder="配件价格" v-model="item.partsprice">
                           <span slot="suffix">元</span>
                       </el-input>
                       <el-button :class="{'active': item.feeType===0}" style="margin-left: 20px" size="mini" @click="item.feeType=0">收费</el-button>
                       <el-button :class="{'active': item.feeType===1}" size="mini" @click="item.feeType=1">三包</el-button>
                       <i style="color: #e15656;margin-left: 10px;cursor: pointer;" class="el-icon-remove" @click="removePart(index)"></i>
                   </div>
                   <div>
                       <el-button  type="text" size="mini" @click="addPart">+添加配件</el-button>
                   </div>
               </el-form-item>
               <el-form-item label="其他费用（元）:" prop="otherPrice">
                   <el-input class="form-item" type="number" v-model="form.otherPrice" placeholder="请输入">
                       <span slot="suffix" style="color: #999999;">元</span>
                   </el-input>
               </el-form-item>
               <el-form-item label="尿素损耗（kg）:" prop="ureaLoss">
                   <el-input class="form-item" type="number" v-model="form.ureaLoss" placeholder="请输入"></el-input>
               </el-form-item>
               <el-form-item label="上传现场照片:">
                   <upload-file
                       type="image"
                       ref="uploadBossPhoto"
                       :limit="9"
                       @change="form.scenePhoto = $event"
                   ></upload-file>
               </el-form-item>
               <el-form-item label="维修人员:" prop="repairName">
                   <el-select class="form-item" v-model="form.repairName" placeholder="请选择人员">
                       <el-option
                           v-for="item in staff"
                           :label="item.userName"
                           :value="item.userName"
                       ></el-option>
                   </el-select>
               </el-form-item>
               <el-form-item label="备注:">
                   <el-input class="form-item" :rows="4" type="textarea" v-model="form.repairDesc" placeholder="请输入"></el-input>
               </el-form-item>
           </el-form>
           <div class="f f-j-c">
               <el-button style="width: 160px;margin-top: 20px;" type="primary" @click="submit">确 定</el-button>
           </div>
       </div>
   </div>
</template>

<script>
    import UploadFile from "@/components/UploadFile";
    import {Message} from "element-ui";
    export default {
        components: {UploadFile},
        data(){
            return{
                paramsDialog:true, // 参数设置弹窗
                lists: [],//接收数据
                staff: [],
                form: {
                    macCode: '', //
                    repairContent: '',
                    repairName: '',
                    otherPrice: '',
                    ureaLoss: '',
                    scenePhoto: '',
                    repairDesc: '',
                    partsInfo: [
                        {
                            partsName: '',
                            partsprice: '',
                            feeType: 0
                        }
                    ],
                },
                rules: {
                    macCode: { required: true, message: '请输入设备编号', trigger: 'blur' },
                    repairName: { required: true, message: '请选择维修人员', trigger: 'blur' },
                    ureaLoss: { required: true, message: '请输入尿素损耗', trigger: 'blur' },
                }
            }
        },
        created() {
            this.getStaff()
        },
        methods:{
            getStaff() {
                this.$http({
                    url:"/api/user/list",
                    method: 'get',
                }).then((res)=>{
                    this.staff = res.data
                })
            },
            submit() {
                this.$refs.form.validate().then(() => {
                    this.$http({
                        url:"/api/machine/repair/submit",
                        data: this.form
                    }).then((res)=>{
                        Message.success('添加成功')
                        this.$router.back()
                    })
                })
            },
            removePart(index) {
                this.form.partsInfo.splice(index,1)
            },
            addPart() {
                this.form.partsInfo.push({
                    partsName: '',
                    partsprice: '',
                    feeType: 0
                })
            }
        }
    }
</script>

<style scoped lang="scss">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
input[type='number'] {
    -moz-appearance: textfield;
}

.form{
    margin-top: 40px;
    padding-left: 40px;
}

.form-item {
    width: 220px;
}
.parts {
    margin-bottom: 10px;

    .active {
        color: #fffdef;
        background: #3487E8;
    }
}
</style>
